<template>
	<view class="illustrate">
		<view class="illustrate-tab">
			<view :class="['tab-item',activeTab===0?'active':'']" @click="changeActiveTab(0)">说明书</view>
			<view :class="['tab-item',activeTab===1?'active':'']" @click="changeActiveTab(1)">说明书图片</view>
		</view>
		<view class="illustrate-content">
			<view class="content-border" v-if="activeTab===0">
				<view class="illustrate-item">
					<view class="illustrate-label">商品名称</view>
					<view class="illustrate-value">{{goodsDetail.goodsName}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">成分</view>
					<view class="illustrate-value">{{goodsAttr.medComponent}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">适应症/功能主治</view>
					<view class="illustrate-value">{{goodsAttr.attendingFunction}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">用法用量</view>
					<view class="illustrate-value">{{goodsAttr.usageDosage}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">禁忌</view>
					<view class="illustrate-value">{{goodsAttr.contraindication}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">注意事项</view>
					<view class="illustrate-value">{{goodsAttr.mattersAttention}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">运输方式</view>
					<view class="illustrate-value">{{goodsAttr.shippingTypeName}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">贮藏</view>
					<view class="illustrate-value">{{goodsAttr.storageConditionName}}</view>
				</view>
				<view class="illustrate-item">
					<view class="illustrate-label">贮藏注意事项</view>
					<view class="illustrate-value">{{goodsAttr.storageRemark}}</view>
				</view>
			</view>
			<view class="content-image" v-if="activeTab===1">
				<!-- <view @click="goPdf">附件1</view> -->
				<!-- <Img :src="item" v-for="(item,i) in goodsAttr.advList" :key="i"/> -->
				<!-- <view v-for="(item,i) in goodsAttr.advList" :key="i" >{{item}}</view> -->
				<image style="width: 100%; height:'auto';" :src="item"  v-for="(item,i) in goodsAttr.goodsDescUrlList" :key="i"></image>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			goodsDetail:{
				type:Object,
				default:()=>{}
			},
			goodsAttr:{
				type:Object,
				default:()=>{}
			},
		},
		data() {
			return {
				activeTab:0,
			}
		},
		computed:{
		},
		created() {
		},
		methods: {
			changeActiveTab(index){
				if (this.activeTab!==index) {
					this.activeTab=index
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.illustrate{
		background-color: #fff;
		.illustrate-tab{
			display: flex;
			height:88rpx;
			align-items: center;
			border-bottom:1rpx solid $u-border-color;
			.tab-item{
				flex:1;
				text-align: center;
				height:100%;
				line-height: 88rpx;
			}
			.active{
				color:$u-type-primary;
				position: relative;
				&:after{
					content: '';
					display: block;
					width:60rpx;
					height:4rpx;
					background-color:$u-type-primary;
					position: absolute;
					bottom:0;
					left:50%;
					margin-left:-30rpx;
				}
			}
		}
		.illustrate-content{
			padding:24rpx;
			.content-border{
				border-top:2rpx solid $u-border-color;
				border-left:2rpx solid $u-border-color;
				.illustrate-item{
					display: flex;
					font-size: 24rpx;
					.illustrate-label{
						width:180rpx;
						padding:14rpx;
						border-bottom:2rpx solid $u-border-color;
						border-right:2rpx solid $u-border-color;
						color:$u-content-color;
						line-height: 36rpx;
					}
					.illustrate-value{
						flex:1;
						padding:14rpx;
						border-bottom:2rpx solid $u-border-color;
						border-right:2rpx solid $u-border-color;
						color:$u-main-color;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>
